<template>
  <div>
    <div class="header">
      <div class="header-top">
        <span>订单</span>
      </div>
      <div class="header-bottom">
        <van-tabs v-model="activeName" title-active-color="#ffb000">
          <van-tab title="全部订单" name="a">
            <div v-for="o in order" :key="o.orderId" @click="onOrderDetail(order)">
              <order :order="o"/>
            </div>
            <div v-if="isOrder">
              <van-empty
                class="custom-image"
                image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
                description="空空如也,赶紧下单"
              />
            </div>
          </van-tab>  
          <van-tab title="待评价" name="b">内容 2</van-tab>
          <van-tab title="退款" name="c">内容 3</van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import order from "./order.vue";
import axios from 'axios'
export default {
  name: 'App',
  components:{order},
  data(){
    return{
      baseUrl: 'http://localhost:8081/images/item/',
      activeName: 'a',
      token:'Bearer ' + localStorage.getItem("token"),
      order:[],// 订单
      isOrder:true,
    }
  },
  methods:{
    //点击进入订单详情
    onOrderDetail(order){
      console.log(order);
      this.$router.push({
        path:"/orderDetails"
      })
    },
    //拼接地址
    getImagePath(imgName){
        return `${this.baseUrl}${imgName}`;
    },
    queryUserOrder(){
      let that = this
      const instance = axios.create({
          baseURL: 'https://api.example.com',
          timeout: 5000,
          headers: {
              // 设置请求头，把 token 传递给服务器程序，以便于认证
              'Authorization': that.token
          }
      });
      // 发起请求
      instance.get("http://localhost:9090/api/user/Order/listOrder",{
          params:{
            uid:this.$store.state.uid,
            orderType:'WaiMai'
          }
        })        
        .then(res => {       
          console.log(res.data);
          if (res.data.code == 200) {
            this.order = res.data.data;
            this.order.forEach(o => {
              //orderStatusDetails
                switch (o.orderStatus) {
                  case 0:
                    this.$set(o,"orderStatusDetails","待支付");
                    break;
                  case 1:
                    this.$set(o,"orderStatusDetails","待商家接单");
                    break;
                  case 2:
                    this.$set(o,"orderStatusDetails","待骑手接单");
                    break;
                  case 3:
                    this.$set(o,"orderStatusDetails","待配送");
                    break;
                  case 4:
                    this.$set(o,"orderStatusDetails","配送中");
                    break;
                  case 5:
                    this.$set(o,"orderStatusDetails","已送达");
                    break;
                  case 6:
                    this.$set(o,"orderStatusDetails","已完成");
                    break;
                  case 7:
                    this.$set(o,"orderStatusDetails","已取消");
                    break;
                  case 8:
                    this.$set(o,"orderStatusDetails","已退款");
                    break;
                  case 9:
                    this.$set(o,"orderStatusDetails","退款中");
                    break;
                  case 10:
                    this.$set(o,"orderStatusDetails","商家拒接");
                    break;
                  default:
                    this.$set(o,"orderStatusDetails","无效的订单状态");
                    break;
                }

            })
            if (res.data.data.length === 0) {
              this.isOrder = true;
              return
            }
            this.isOrder = false;
          }
        })        
        .catch(err => {            
            console.log(err.data)        
        }) 
    },
    aa(){
      this.$store.state.active = 1 ;
    
    }
  },
  mounted(){
    this.aa();
    this.queryUserOrder()
  }
  
}
</script>
  
<style scoped>
 .header{
   width: 100%;
   height: 120px;
   background-color: white;
   text-align: center;
 }
 
 .header .header-top{
   height: 60px;
   background-color: white;
 }
 .header .header-top span{
   display: block;
   width: 100px;
   height: 100px;
   margin: 0 auto;
   line-height: 60px;
   font-size: 23px;
 }

.box{
  width: 100px;
  height: 45px;
  background-color: white;
  color: black;
}
.custom-image .van-empty__image {
    width: 90px;
    height: 90px;
  }
</style>
